body {
	background-color: #e8e8e8;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 90vh;
}

.newton-cradle {
	--uib-size: 50px;
	--uib-color: #474554;
	--uib-speed: 1.2s;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--uib-size);
	height: var(--uib-size);
}

.newton-cradle__dot {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	width: 25%;
	transform-origin: center top;
}

.newton-cradle__dot::after{
	content: '';
	display: table-caption;
	width: 100%;
	height: 25%;
	border-radius: 50%;
	background-color: var(--uib-color);
	
}
.newton-cradle__dot:first-child{
	animation: swing var(--uib-speed) linear infinite;
}
.newton-cradle__dot:last-child{
	animation: swing2 var(--uib-speed) linear infinite;
}

@keyframes swing {
	0%{
		transform: rotate(0deg);
		animation-timing-function: ease-out;
	}
	25%{
		transform: rotate(70deg);
		animation-timing-function: ease-in;
	}
	50%{
		transform: rotate(0deg);
		animation-timing-function: linear;
	}
}
@keyframes swing2 {
	0%{
		transform: rotate(0deg);
		animation-timing-function: linear;
	}
	25%{
		transform: rotate(0deg);
		animation-timing-function: ease-out;
	}
	75%{
		transform: rotate(-70deg);
		animation-timing-function: ease-in;
	}
}
